<template>
  <el-table :data="data" border stripe>
    <!--type="index" 给这个属性直接是索引列的效果-->
    <el-table-column label="#" type="index" />
    <!--prop 对应的属性值-->
    <el-table-column label="姓名" prop="username" />
    <el-table-column label="邮箱" prop="email" />
    <el-table-column label="电话" prop="mobile" />
    <el-table-column label="角色" prop="role_name" />
    <el-table-column label="状态">
      <!--作用域插槽-->
      <!--scope是自定义属性值名，其下有row的属性-->
      <template slot-scope="scope">
        <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)" />
      </template>
    </el-table-column>
    <el-table-column label="操作" width="180px">
      <template slot-scope="scope">
        <!-- 修改按钮 -->
        <!--size 大小属性-->
        <el-button type="primary" icon="el-icon-edit" size="mini" @click="$emit('showEditDialog',scope.row.id)" />
        <!-- 删除按钮 -->
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)" />
        <!-- 分配角色按钮 -->
        <!--:enterable="false" 鼠标不能进入tooltip=隐藏-->
        <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
          <el-button type="warning" icon="el-icon-setting" size="mini" @click="$emit('setRole',scope.row)" />
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { setUserState, delUserData } from '@/api/user.js'

export default {
  name: 'UserList',
  props: {
    data: {
      type: Array,
      required: true
    },
    user: {
      type: Object,
      required: true
    }
  },
  data() {
    return {}
  },
  created() {},
  methods: {
    // ^修改用户状态
    // 监听 switch 开关状态的改变
    async userStateChanged(obj) {
      // console.log(obj)
      try {
        await setUserState(obj.id, obj.mg_state)
        this.$message.success('更新用户状态成功')
      } catch (err) {
        this.$message.error('更新用户状态失败')
      }
    },
    // ^删除用户
    // 根据Id删除对应的用户信息
    removeUserById(id) {
      // console.log(id)
      this.$confirm('请问是否要删除该分类?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await delUserData(id)
          this.$message.success('删除成功')
          // 重新请求最新的数据
          this.$emit('upData', this.user.pagenum - 1)
          // if (this.data.length === 1) {
          //   // this.$parent.getUserList()
          // }
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    }
  }
}
</script>

<style lang='less' scoped>
</style>
